/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class" style="display: flex;justify-content: flex-start;">
		<!-- <div class="liveHeader">
      <div class="listWrap" >
        <div v-for="(item,index) in getHeadList" :key="index" @click="tabCurrent(item)" class="item" :class="{active:selectItemObj.id===item.id}">
          <h3 class="title">{{item.name}}</h3>
          <p class="tip">{{item.title}}</p>
        </div>
      </div>
    </div> -->
		<view class="search_top across">
			<view class="left">
				<image class='back' @click="navBack" src='@/static/images/back.png' v-if="issou"></image>
				<view class="search_top_center across">
					<image src='@/static/images/icon-search.png'></image>
					<input type="text" @input='setKeyword' placeholder="搜索直播" v-model="sousuo"/>
				</view>
				<view class="search_btn" @click="btnSearch">搜索</view>
			</view>
		</view>
		<video-header @setTitle='setTitle' :isBoolean='isBoolean' :actIndex='actIndex' @setIndex='setIndex' v-if="isflase">
		</video-header>

		<div :style="{marginTop:bodyMarginTop}" :class="issou==false?'bigWrap':'bigWraps'">

			<!--  直播区-->
			<div v-show="selectItemObj.id===3">
				<div v-if="issou==false">	
					<view class="liveList">
						<block v-for="(item,index) in list" :key="index">
							<liveCard2 @hook:beforeUpdate="$loading" @hook:updated="$hideLoading" :info="item"
								:indexw="index"></liveCard2>
						</block>
					</view>
					<u-empty v-if="list.length===0" :src="getNoListImg" icon-size="300" text="暂无直播"></u-empty>
				</div>
				<div v-else>
					<view class="liveList">
						
						<view v-for="(item,index) in sousuolist" :key="index" style="display: flex;flex-direction: column;justify-content: center;margin-top: 30upx">
							<view style="display: flex;align-items: center;" @click="tolink(item,index)">
								<image :src="item.shop_logo" mode="" style="width: 120rpx;height: 120rpx;border-radius: 50%;border: 2rpx solid #FF3D3D; "></image>
								<text style="color: #Fff;padding-left: 20rpx;">{{item.shop_name}}</text>
							</view>
							<liveCard3 @hook:beforeUpdate="$loading" @hook:updated="$hideLoading" :info="item"
								:indexw="index"></liveCard3>
						</view>
						
					</view>
					<u-loadmore :status="loadStatus" :load-text="loadTexts" v-if="sousuolist.length!==0"/>
					<!-- <u-empty v-if="sousuolist.length===0" :src="getNoListImg" icon-size="300" text="暂时没有更多了"></u-empty> -->
					<image src="@/static/nozhibo.png" mode="" v-if="sousuolist.length==0" style="width: 457upx;height: 330upx;margin: 0 auto;margin-left: 160upx;margin-top: 100upx;"></image>
				</div>
			</div>


			<!--  短视频-->
			<view class="videoList" v-show="selectItemObj.id==4">
				<u-waterfall v-model="flowList" ref="uWaterfall" @hook:beforeUpdate="$u.throttle($loading,2000)"
					@hook:updated="$hideLoading">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
							<u-lazy-load threshold="-450" border-radius="10" :image="item.cover_img" :index="index"
								@click="$u.route({url:'/pagesB/vertical-swiper/vertical-swiper',params:{id:item.id}})">
							</u-lazy-load>
							<div class="u-p-10">{{item.goods_name}}</div>
							<view class="u-flex u-row-between u-p-r-10 u-p-l-10 u-p-t-10">
								<div class="u-flex u-col-center">
									<u-image :src="item.shop_logo" width="40" height="40" shape="circle"></u-image>
									<span class="u-line-1 u-m-l-5 u-font-xs shortVideoTitle">{{item.shop_name}}</span>
								</div>
							</view>
						</view>
					</template>
				</u-waterfall>
				<u-empty v-if="flowList.length===0" :src="getNoListImg" icon-size="300" text="暂无直播"></u-empty>
			</view>
		</div>
		<!-- <u-loadmore :status="loadStatus" :load-text="loadText" /> -->
	</view>
</template>

<script>
	import videoHeader from "../../components/video/videoHeader.vue"
	let isOpenReachBottom = false
	import liveCard2 from '@/components/liveCard2'
	import liveCard3 from '@/components/liveCard3'
	import shopItem from '@/components/shop/shopItem'
	import shopperCard from "../../components/shopperCard";


	let sortArray = []
	let cacheMap = new Map();
	export default {

		data() {
			return {
				adList: [],
				headList: [],
				navList: [],
				issou:false,
				list: [],
				sousuo:'',
				currIndex: 0,
				liveSortIndex: 0,
				currType: 1,
				loadingType: 0,
				isflase:true,
				isBoolean: 1,
				actIndex: 0,
				headerPosition: 'fixed',
				currentIndex: 3,
				isScrollTop: false,
				followShopList: [],
				page: 1,
				sousuolist:[],
				loadStatus: 'loadmore',
				flowList: [],
				newShoperList: [],
				bodyMarginTop: '',
				isOpenLive: false,
				selectItemObj: {
					id: 3,
					is_show: 1,
					name: "直播",
					sort: 1,
					title: "主播在线",
				},
				headerStyle: {
					'position': ""
				},
				isLogin: false

			}
		},
		// 获取节点信息必须写在 onReady生命周期内
		onReady() {
			const platform = uni.getSystemInfoSync().platform
			const addHieght = platform === 'android' ? 66 : 42
			this.$u.getRect('.listWrap').then(res => {
				console.log(res)
				this.$nextTick(() => {
					// #ifdef APP-PLUS
					this.bodyMarginTop = res.height + addHieght + 'upx'
					// #endif
					// #ifndef APP-PLUS
					this.bodyMarginTop = 100 + 'rpx'
					// #endif
				})
			})
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'WoShop 直播种草电商',
				path: '/pages/tabBar/Live',
			}
		},
		onShow() {
			const token = uni.getStorageSync('token')
			if (token) {
				this.isLogin = true
			}
			this.getreadprofile()
		},

		onLoad(option) {

			this.getLiveSort()
			this.getLiveInfoData()


			sortArray = new Array(15).fill([])

			uni.$on('openLive', () => {
				this.$set(this.selectItemObj, 'name', '直播')

			})

		},
		watch: {
			selectItemObj: {
				handler(val) {
					this.getFunction(val.name)
				},
				deep: true,
				immediate: true
			}
		},
		onReachBottom() {
			isOpenReachBottom = true //下拉设置 isOpenReachBottom为空， 关闭接口方法中获取cacheMap缓存值
			const cacheData = cacheMap.get(this.selectItemObj)
			this.page = cacheData.page
			let loadStatus = cacheMap.get(this.selectItemObj).loadStatus
			if (loadStatus == 'nomore') return;
			this.page++
			this.loadStatus = 'loading'
			const name = this.selectItemObj.name
			this.getFunction(name)

		},

		onPullDownRefresh() {

			this.headerStyle.position = 'static'
			const name = this.selectItemObj.name

			isOpenReachBottom = true
			this.page = 1
			this.getFunction(name)
			console.log(name)

		},

		computed: {
			getHeadList() {
				return this.headList.filter(res => res.is_show === 1)
			},
			getNoListImg() {
				return this.STATICURL + 'images/nullStatus/noList.png'
			},
			getNoFavoriteImg() {

				return this.STATICURL + 'images/nullStatus/noFavorite.png'
			},
			loadText() {
				return {
					loadmore: '上拉显示更多',
					loading: '加载中',
					nomore: '没有更多了'
				}
			},
			loadTexts() {
				return {
					loadmore: '暂时没有更多了',
					loading: '加载中',
					nomore: '没有更多了'
				}
			}
		},
		components: {
			liveCard2, //直播卡片组件
			shopItem, //关注店铺列表
			shopperCard, //上新card组件
			videoHeader,
			liveCard3, 
		},

		methods: {
			tolink(item,index){
				const params = {
					shop_id: item.shop_id,
					index: index
				}
				// #ifdef APP-PLUS
				this.$u.route({
					url: '/pages/live/Audience',
					params
				})
				// #endif
				// #ifdef  MP-WEIXIN || H5
				this.$u.route({
					url: '/platforms/live-player',
					params
				})
				// #endif
			},
			navBack(){
				this.sousuolist=[]
				this.sousuo  = ''
				this.issou = false
				this.isflase = true
			},
			setKeyword(){
				// this.$http.getaliveindex({
				// 	typeid: id,
				// 	page: this.page
				// }).then(res => {
				// 	if (res.status === 200) {
				// 		sortArray[index] = res.data.data
				// 		this.dealApiData('list', sortArray[index])
				// 		console.log(cacheMap)
				// 	}
				// })
				console.log(this.sousuo,"收拾收拾")
			},
			btnSearch(){
				this.issou=true
				this.isflase = false
				this.$http.getaliveindex({
					// typeid: this.cateId,
					keyword: this.sousuo
				}).then(res => {
					if (res.status === 200) {
						// sortArray[index] = res.data.data
						// this.dealApiData('list', sortArray[index])
						console.log(res,"搜索出来的是啥呀")
						this.sousuolist = res.data.data
					}else{
						this.sousuolist = []
					}
				})
				
			},
			setIndex(e) {
				console.log(e, "头部触发1111")
				this.issou = false
				this.actIndex = e.index
				this.isBoolean = 0
				this.cateId = e.id
				this.$http.getaliveindex({
					typeid: this.cateId,
					keyword: this.sousuo
				}).then(res => {
					if (res.status === 200) {
						// sortArray[index] = res.data.data
						// this.dealApiData('list', sortArray[index])
						console.log(res,"搜索出来的是啥呀")
						this.list = res.data.data
					}else{
						this.list = []
					}
				})
			},
			setTitle(index) {
				this.issou = false
				console.log(index, "头部触发22222")
				this.isBoolean = index
				this.actIndex = -1
				this.cateId = 0
			},
			getreadprofile() {
				this.$http.getreadprofile().then(res => {
					console.log(123, res)
					if (res.status == 200) {
						uni.setStorageSync('userInfo', JSON.stringify(res.data));
						console.log(JSON.stringify(res.data))
						this.myuserinfo = res.data;
						this.isLogin = 1;
						// vuex 提交用户信息
						this.$store.commit('setUserInfo', res.data)

					} else {
						uni.showToast({
							title: res.mess,
							icon: 'none'
						})
						setTimeout(() => {
							var cart = 0
							uni.redirectTo({
								url: `../../pagesB/login/login?cart=${cart}`
							})
						}, 1500)
					}
				})
			},
			getFunction(name) {

				let obj = this.selectItemObj
				let isHasCacheData = cacheMap.has(obj)
				let cacheData, cacheList;
				if (isHasCacheData) {
					cacheData = cacheMap.get(obj)
					cacheList = cacheData.list
					this.loadStatus = cacheData.loadStatus
				}
				if (name === '关注') {

					if (isHasCacheData && !isOpenReachBottom) {
						return this.followShopList = cacheList
					}

					this.getFollowShops()
				}
				if (name === '上新') {

					if (isHasCacheData && !isOpenReachBottom) {
						return this.newShoperList = cacheList
					}
					this.getNewsList()
				}
				if (name === '直播') {

					if (isHasCacheData && !isOpenReachBottom) {
						return this.list = cacheList
					}
					this.getLiveVideoList(-1, 0)
				}

				if (name === '短视频') {
					if (isHasCacheData && !isOpenReachBottom) {
						return this.flowList = cacheList
					}
					this.getVideoList()
				}
			},

			// 动态获取顶部一级分类列表
			getLiveSort() {
				this.$http.getLiveSort().then(res => {
					this.headList = res.data.cate_list
				})
			},
			// 顶部一级分类切换
			tabCurrent(item) {
				this.$set(this, 'selectItemObj', item)
				if (cacheMap.has(item)) {
					let cachePage = cacheMap.get(item).page
					this.page = cachePage || 1
				}

			},
			getisSendPost() {

				if (cacheMap.has(this.selectItemObj) && !isOpenReachBottom) {
					return false
				}
			},
			getLiveInfoData() {
				this.$http.getLiveAd({
					pos_id: 9
				}).then((res) => {
					if (res.status === 200) {
						this.adList = res.data
					}
				})
				this.$http.getNavList().then(res => {
					if (res.status === 200) {
						this.navList = res.data
					}
				})
			},
			// 获取关注的店铺列表
			getFollowShops() {
				this.getisSendPost()
				const data = {
					page: this.page
				}
				this.$http.getFollowShops(data).then(res => {
					if (res.status === 200) {
						this.loadStatus = 'loadmore'
						this.dealApiData('followShopList', res.data)

					}
				})
			},

			// 直播分类分类切换
			changeLiveSort(index) {

				let cacheList = cacheMap.get(this.selectItemObj).list[index]

				this.liveSortIndex = index;
				// if (this.currIndex === index) return false
				this.currType = this.navList[index].id
				this.isMore = false
				let id = this.navList[index].id
				this.getLiveVideoList(id, index)

			},
			getLiveVideoList(id, index) {


				this.getisSendPost()
				this.$http.getaliveindex({
					typeid: id,
					page: this.page
				}).then(res => {
					if (res.status === 200) {
						sortArray[index] = res.data.data
						this.dealApiData('list', sortArray[index])
						console.log(cacheMap)
					}
				})
			},
			getNewsList() {

				this.getisSendPost()
				const data = {
					page: this.page
				}
				this.$http.getNewsList(data).then(res => {
					this.loadStatus = 'loadmore'
					this.dealApiData('newShoperList', res.data.news_list)

				})
			},
			getVideoList() {
				this.getisSendPost()
				let data = {
					page: this.page
				}
				this.$http.getVideoList(data).then(res => {
					this.loadStatus = 'loadmore'
					this.dealApiData('flowList', res.data.video_list)
					this.page++
				})
			},
			dealApiData($dataKey, data) {
				uni.stopPullDownRefresh()
				isOpenReachBottom = false //只在下拉onReachBottom中开启    请求成功后 关闭
				if (this.page <= 1) {
					this.$set(this, $dataKey, data)
				} else {
					this[$dataKey] = this[$dataKey].concat(data)
				}
				this.addCacheMap(this[$dataKey]) //缓存列表数据
				if (data.length <= 10) return this.loadStatus = 'nomore'; //如果返回的列表数据小于等于10 ，则判断为没有更多数据
			},
			// map缓存  缓存当前分类对象  数据列表  page值， 避免切换时多次请求和
			addCacheMap(list) {
				cacheMap.set(
					this.selectItemObj, {
						list, //数据
						page: this.page, //分页
						loadStatus: this.loadStatus //触底加载状态
					}
				)
			},
			preView(list, index) {
				uni.previewImage({
					urls: list,
					current: index,

				});
			},

		},


	}
</script>

<style lang="scss" scoped>
	.left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92vw;
	}

	.back {
		width: 48rpx;
		height: 48rpx;
		// margin-left: 10rpx;
	}

	.search_top {
		width: 100%;
		// margin-top: 20rpx;
		z-index: 9;
		align-items: center;
		// width: 65vw;
		justify-content: space-between;
		align-items: center;
		height: 94rpx;
		padding: 0rpx 4vw;
		position: fixed;
		background-color: #000000;

		.left {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 92vw;
			padding-top: 14upx;
		}

		.back {
			width: 48rpx;
			height: 48rpx;
			// margin-left: 10rpx;
		}

		.search_top_center {
			width: 580rpx;
			height: 60rpx;
			background-color: #4D4D4D;
			display: flex;
			align-items: center;
			padding: 0 10rpx;
			border-radius: 10rpx;

			.back_box {
				flex: 1;
			}

			image {
				width: 32rpx;
				z-index: 10;
				height: 32rpx;
			}

			input {
				flex: 1;
				margin-left: 15rpx;
				color: #fff;
			}
		}

		.search_btn {
			font-size: 30rpx;
			color: #ffffff;
		}
	}

	.bigWrap {
		padding-top: 190rpx;
		padding-bottom: 80rpx;
		background-color: #0F111D;
	}
	.bigWraps {
		padding-top: 120rpx;
		padding-bottom: 80rpx;
		background-color: #0F111D;
	}
	.index_class {
		height: 100%;
		background-color: #0F111D;
	}

	@import '~uview-ui/index.scss';

	.live-itemlist__wrap {
		padding: 0 16upx 60upx 16upx;
		background: #F4F4F4;
		font-size: 0;
		display: flex;
		flex-wrap: wrap;

		.live-itemlist__item {
			flex: 1;
			flex-basis: 300upx;
			margin-top: 16upx;
			background: #fff;
			border-radius: 10upx;
			margin-right: 20upx;

			&:nth-of-type(2n) {
				margin-right: 0upx;
			}
		}

	}

	.live-title__title {
		font-size: 32upx;
		text-align: center;
	}

	.live-ranklist__item .disable {
		right: 0 !important;
		left: inherit !important;
		width: 80upx !important;
		background: transparent !important;
		color: #fff;

	}

	.live-ranklist__item .active {
		right: 0 !important;
		left: inherit !important;
		width: 80upx !important;
		background: #FA3F3F !important;
		border-color: #FA3F3F;
	}

	.live-itemlist__item--header .active {
		background: #ff7d23 !important;
		color: #fff !important;
		border-color: #ff7d23;
	}

	.live-ranklint__item--footer {
		padding-bottom: 20upx !important;
		margin-bottom: 20upx !important;
	}

	.bottomPanel {
		text-align: center;

		.title {
			font: 30upx;
		}

		.keywords {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.liveList {
		@include flexbox();
		padding: 0 10upx 50upx;
		// padding-left: 30upx;
	}

	.followWrap {
		margin: 0 0 120upx;

	}


	/*短视频*/
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		position: relative;
		padding-bottom: 10upx;
	}

	.shortVideoTitle {
		width: 220upx;
		color: #a0a4a7;
	}

	.noLoginWrap {
		margin-top: 180upx;
	}

	.nullStatusImg {
		width: 60%;
		margin: 0 auto;

	}


	.liveHeader {
		padding: 0 15upx;
		/*  #ifndef  MP-WEIXIN */
		padding-top: var(--status-bar-height);

		/*  #endif  */
		.panel1 {
			@include flexbox;
			margin-bottom: 15upx;

			.title {
				font-weight: 600;
				font-size: 40upx;
				color: #444;
			}

			.tipInfo {
				font-size: 24upx;
				font-weight: normal;
				color: #999;
			}

			h2 {
				margin-left: 20upx;
				line-height: 1.4;
			}

			.iconWrap {
				margin-right: 25upx;

				.icon {
					width: 48upx;
					height: 48upx;
					margin-left: 30upx;

					&:first-child {
						width: 44upx;
						height: 44upx;
					}
				}
			}

		}

		.listWrap {
			@include flexbox;
			transition: all 0.7s;
			position: fixed;
			z-index: 999;
			background-color: #fff;
			left: 0;
			right: 0;
			border-bottom: 2upx solid #f5f5f5;
			padding: 80upx 30upx 10upx;

			/*  #ifndef APP-PLUS */
			padding: 10upx 30upx 10upx;
			/*  #endif  */
			border-radius: 0 0 20upx 20upx;
			top: 0;

			.item {
				text-align: center;
				position: relative;

				&.active {
					color: #fa3e3f;

					.tip {
						background: linear-gradient(to right, #ffa468, #fa3f3f);
						padding: 4upx 16upx;

						color: #fff;
					}
				}

				&:not(:last-child) {
					padding-right: 48upx;

					&::after {
						content: '';
						width: 1upx;
						height: 50upx;
						background-color: #ececec;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				.title {
					font-size: 36upx;
					line-height: 1.4;
				}

				.tip {
					margin: 0;
					padding: 4upx 16upx;
					line-height: 1;
					font-size: 24upx;
					color: #888;
					border-radius: 100px;
					transition: all 0.2s;
				}
			}
		}

	}

	.coverView {
		position: fixed;

		background-color: transparent;

	}
</style>
